<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      /* 选中的是div的第一个儿子的p元素(按照所有兄弟计算的) - 看结构1 */
      /* div > p:first-child {
        color: red;
      } */

      /* 
        选中的是div的第一个儿子的p元素(按照所有兄弟计算的) - 看结构2 
        这个意思是选中div的第一个儿子元素，可是第一个儿子元素是span元素，所以不符合，他要的是第一个元素是p元素，但是p元素是第二个所以都不亮
      */
      /* div > p:first-child {
        color: red;
      } */

      /* 选中的是div的后代p元素，且p的父级是谁无所谓，但p必须是其父级的第一个儿子 - 看结构3 (按照所有兄弟计算的) */
      /* div p:first-child {
        color: red;
      } */

      /* 选中的是p元素，且p的父亲是谁无所谓，但p必须是其父亲的第一个儿子(按照所有兄弟计算的) */
      p:first-child {
        color: red;
      }
    </style>
  </head>
  <body>
    <!-- <div>
      <p>张三：98分</p>
      <p>李四：88分</p>
      <p>王五：78分</p>
      <p>赵六：68分</p>
    </div> -->

    <!-- <div>
      <span>张三：98分</span>
      <p>李四：88分</p>
      <p>王五：78分</p>
      <p>赵六：68分</p>
    </div> -->

    <p>测试1</p>
    <div>
      <p>测试2</p>
      <marquee behavior="" direction="">
        <p>测试3</p>
        <p>张三：98分</p>
      </marquee>
      <p>李四：88分</p>
      <p>王五：78分</p>
      <p>赵六：68分</p>
    </div>
  </body>
</html>
